<div
  class="amplify-flex amplify-field amplify-textfield amplify-phonenumberfield"
>
  <label
    class="amplify-label"
    [class.amplify-visually-hidden]="labelHidden"
    [for]="textFieldId"
  >
    {{ label }}
  </label>
  <div class="amplify-flex amplify-field-group amplify-field-group--horizontal">
    <div class="amplify-field-group__outer-start">
      <div
        class="amplify-flex amplify-field amplify-selectfield amplify-dialcodeselect"
        style="flex-direction: column"
      >
        <amplify-form-select
          name="country_code"
          label="Country Code"
          [id]="selectFieldId"
          [items]="countryDialCodesValues"
          [defaultValue]="defaultCountryCode"
        ></amplify-form-select>
      </div>
    </div>

    <div
      class="amplify-field-group__field-wrapper amplify-field-group__field-wrapper--horizontal"
    >
      <input
        class="amplify-input amplify-field-group__control"
        [id]="textFieldId"
        [type]="type"
        [name]="name"
        [placeholder]="placeholder"
        [required]="required"
        [value]="initialValue"
        [autocomplete]="autocomplete"
        [attr.disabled]="disabled ? '' : null"
        [attr.aria-invalid]="hasError ? 'true' : 'false'"
        [attr.aria-describedby]="describedBy"
      />
    </div>
  </div>
</div>
